<template>
  <div id="app">
    <!-- 路由出口 -->
    <router-view />
    <nav class="app_nav">
      <router-link :class="addActive('/')" to="/">主页</router-link>
      <router-link :class="addActive('/share')" to="/share">发布</router-link>
      <router-link :class="addActive('/community')" to="/community">社区</router-link>
      <router-link :class="addActive('/myself')" to="/myself">我的</router-link>
    </nav>

    <section class="app_section">
      <div class="app_section_mask">

      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.app_nav{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #e0e8f6;
  border-radius: 50px 50px 0 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 10000;

  a{
    color: purple;
    font-weight: 700;
    text-decoration: none;

    &.active{
      color: orange;
      text-decoration: none;
    }
  }
}
.app_section{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0,.3);
  z-index: 100000;

  .app_section_mask{
    width: 80%;
    height: 100vh;
    background: #e0e8f6;
  }
}
</style>

<script>
export default {
  name: "app",
  methods: {
    addActive(route){// 路由跳转高亮设置
      return this.$route.path === route ? "active" : "";
    }
  }
}
</script>
